<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('选择承办单位')"/>
    <link th:href="@{/ajax/libs/bootstrap-tagsinput/tagsinput.css}" rel="stylesheet">
    <link th:href="@{/ajax/libs/jQuery-ui/jquery-ui.css}" rel="stylesheet">
    <script type="text/javascript">
        function run() {
            menu1Num = $('#menu1 li').size();
            menu2Num = $('#menu2 li').size();
            if (menu1Num > 0 && menu2Num == 0) {
                document.getElementById("tab1").click();
            } else {
                document.getElementById("tab2").click();
            }
        }
    </script>
    <style>
        label {
            font-weight: bold;
        }

        @font-face {
            font-family: 'huawen';
            src: url("/fonts/huawen.woff2");
        }
    </style>
</head>

<body onload="run()" style="background-color: #F4F6FA;font-size: 13px;font-family:'huawen' ;font-weight: bold">
<div class="main-content" style="margin: 0;padding: 0">
    <form id="form-user-add" class="form-horizontal" style="background-color: #F4F6FA">
        <div class="col-sm-12 entering-page" style="display: flex">
            <div class="col-sm-9" style="margin: 5px;">
                <ul class="nav nav-tabs">
                    <li><a data-toggle="tab" id="tab1" href="#menu1">职能部门</a></li>
                    <li><a data-toggle="tab" id="tab2" href="#menu2">下辖部门</a></li>
                    <li th:if="${deptId == 304090}"><a data-toggle="tab" id="tab3" href="#menu3">直派部门</a></li>
                </ul>

                <div class="tab-content">
                    <div id="menu1" class="tab-pane fade deptTransfer-content">
                        <ul class="deptTransfer-ul"
                            th:with="deptTypes=${@commonServiceImpl.queryFlatDept('__${areaNo}__','__${deptId}__')}">
                            <li class="deptTransfer-li" th:each="dept:${deptTypes}" th:id="${dept['noUnit']}"
                                th:value="${dept['deptShort']}" onDblClick="SelectDept(this.id,this.innerText,0)">
                                [[${dept['deptShort']}]]
                            </li>
                        </ul>
                    </div>
                    <div id="menu2" class="tab-pane fade deptTransfer-content">
                        <ul class="deptTransfer-ul"
                            th:with="downTypes=${@commonServiceImpl.querySonDept('__${deptId}__')}">
                            <li class="deptTransfer-li" th:each="down:${downTypes}" th:id="${down['noUnit']}"
                                th:value="${down['deptShort']}" onDblClick="SelectDept(this.id,this.innerText,0)">
                                [[${down['deptShort']}]]
                            </li>
                        </ul>
                    </div>
                    <div id="menu3" class="tab-pane fade deptTransfer-content" th:if="${deptId == 304090}">
                        <ul class="deptTransfer-ul"
                            th:with="downTypes=${@commonServiceImpl.queryDirectDept('__${deptId}__')}">
                            <li class="deptTransfer-li" th:each="down:${downTypes}" th:id="${down['noUnit']}"
                                th:value="${down['deptShort']}" onDblClick="SelectDept(this.id,this.innerText,'10')">
                                [[${down['deptShort']}]]
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="col-sm-12" style="margin-top: 45px">
                    <div class="input-group">
                        <input type="text" class="form-control" id="tags" value=""
                               style="border-radius: 5px 0 0 5px;"/>
                        <span class="input-group-addon" onclick="deptSearch()"><i
                                class="glyphicon glyphicon-search"></i></span>
                    </div>
                </div>
                <div class="col-sm-12" style="margin-top: 45px">
                    <!--          <span class="badge badge-success" style="margin-bottom: 10px">双击取消选中</span>-->
                    <div class="alert alert-info alert-dismissable">
                        双击取消选中
                    </div>
                    <select id="selectDept" class="form-control" multiple="multiple" style="height: 162px"></select>
                </div>
                <div class="col-sm-12" style="margin-top: 45px;text-align: center">
                    <button type="button" class="btn btn-success btn-sm" onclick="ReportDept()">确认</button>
                </div>
            </div>


        </div>
    </form>
</div>

<script th:src="@{/ajax/libs/layui/laydate.js}"></script>
<th:block th:include="include :: footer"/>
<script th:src="@{/ajax/libs/bootstrap-tagsinput/tagsinput.min.js}"></script>
<script th:src="@{/ajax/libs/jQuery-ui/jquery-ui.js}"></script>
<script>
    $(function () {
        var list = $('.nav-tabs').find('li');
        for (var i = 0; i < list.length; i++) {
            $('#tab' + (i + 1)).bind('click', function () {
                menuChange(this);
            })
        }
    })

    function deptSearch() {
        var list = $('div.active.in').find('li');
        var searchVal = $('#tags').val();
        $.each(list, function (index, value) {
            var val = $(value).text();
            var item = $(list[index]);
            if (searchVal === '') {
                item.show();
            } else if (val.indexOf(searchVal) === -1) {
                item.hide();
            } else {
                item.show();
            }
        })
        var isShow = true;
        $.each(list, function (index, value) {
            var item = $(list[index]);
            if (item.is(':visible')) {
                isShow = false;
            }
        })
        if (isShow) {
            if ($(list[0]).text() !== '未查询到匹配数据') {
                var oldHtml = $('div.active.in').find('ul').html();
                $('div.active.in').find('ul').html('<li class="deptTransfer-li">未查询到匹配数据</li>' + oldHtml);
            } else {
                $(list[0]).show()
            }
        } else if ($(list[0]).text() === '未查询到匹配数据') {
            $(list[0]).hide()
        }
    }

    function menuChange(obj) {
        var menuId = $(obj).attr('href').substring(1);
        var menuList = $('#' + menuId).find('li');
        $.each(menuList, function (index, value) {
            var item = $(menuList[index]);
            if ($(value).text() == '未查询到匹配数据') {
                item.hide();
            } else {
                item.show();
            }
        });
        $('#tags').val('');
    }

    function SelectDept(dNo, dName, flag) {
        var opt = $("#selectDept").find('option[value=' + dNo + ']');
        if (opt.length > 0) {
            return
        } else {
            $('#selectDept').append('<option ondblclick="$(this).remove()" value="' + dNo + '" flag="'+flag+'">' + dName + '</option>')
        }
    }

    function ReportDept() {
        //获取选中的部门
        var deptOps = $('#selectDept').find('option');
        var dno = '', dname = '', zpFlag = '';
        $.each(deptOps, function (index, value) {
            if (index !== 0) {
                dno += ",";
                dname += ","
                zpFlag += ","
            }
            dno += $(value).val();
            dname += value.innerText;
            zpFlag += $(value).attr('flag');
        })

        //
        var myFrame = $(top.window['sendDeptEditPart']).find('iframe')[0] || $(top.window['dlSendToSonDirect']).find('iframe')[0] || $(top.window['dlSendToSon']).find('iframe')[0] || $(top.window['deptdialog']).find('iframe')[0];

        var parentDialog = myFrame.contentWindow;

        try {
            if (parentDialog.SonBackSingle && typeof (parentDialog.SonBackSingle) == "function") {
                parentDialog.SonBackSingle(dno, dname, zpFlag);
            } else {
                parentDialog.document.getElementById('navFrame').contentWindow.SonBackSingle(dno, dname, zpFlag);
            }
        } catch (exception) {
            alert(exception);
        }
        $.modal.close();
    }
</script>
</body>
</html>

